<template>
	<view class="">
		<view class="draw" 
		@touchstart.sefl.stop.prevent="onTouchStart" 
		@touchmove.sefl.stop.prevent="onTouchMove"
		@touchend="handleTouchEnd" ref="draggableElement"
		:style="{ left: `${left}px`, top: `${top}px`, width: `${width}px`, height: `${height}px` }"
		v-if="isClose"
		>
		
			<iframe src="https://www.baidu.com" :style="{width: `${width}px`, height: `${height}px`}" class="webview" frameborder="0"></iframe>
		</view>
		
		<image v-else src="../static/right.png" @click="isClose=true" class="right" mode="heightFix"></image>
	</view>
</template>
<script setup>

	import {
		ref,
		onMounted,
		onUnmounted
	} from '../utils/transformVue'
	
	const systemInfo = uni.getSystemInfoSync(); // 获取系统信息
	const screenWidth = systemInfo.windowWidth;
	const screenHeight = systemInfo.windowHeight;

	const left = ref(0); // 初始位置
	const top = ref(0);
	const width = ref(screenWidth / 2); // 初始尺寸
	const height = ref(150);
	const offsetX = ref(0);
	const offsetY = ref(0);
	const lastX = ref(0);
	const lastY = ref(0);
	const minWidth = 50;
	const minHeight = 50;
	const maxWidth = screenWidth - 160; // 根据屏幕宽度设置最大宽度
	const maxHeight = screenHeight - 150; // 根据屏幕高度设置最大高度
	const isPinching = ref(false); // 是否正在缩放
	const draggableElement = ref(null);
	const initialDistance = ref(0);
	const isMaximized = ref(false); // 是否已放大到屏幕宽度
	const initialWidth = ref(screenWidth / 2); // 初始宽度
	const initialHeight = ref(150); // 初始高度
	const isClose = ref(false)
	const onTouchStart = (event) => {
		console.log('按下')
		if (event.touches.length === 1) {
			offsetX.value = event.touches[0].clientX - left.value;
			offsetY.value = event.touches[0].clientY - top.value;
			lastX.value = event.touches[0].clientX;
			lastY.value = event.touches[0].clientY;
		} else if (event.touches.length === 2 && !isPinching.value) {
			isPinching.value = true
			
		}

	}
	const onTouchMove = (event) => {
		if (!isPinching.value) {
			const touch = event.touches[0];
			let newX = touch.clientX - offsetX.value;
			let newY = touch.clientY - offsetY.value;
			
			// 边界检测
			newX = Math.max(0, Math.min(newX, maxWidth - minWidth));
			newY = Math.max(0, Math.min(newY, maxHeight - minHeight));

			left.value = newX;
			top.value = newY;
			console.log(left.value)
		}

	}
	const handleTouchEnd = () => {
		console.log("抬起")
		if (isPinching.value) {
			if (width.value == screenWidth) {
				width.value = initialWidth.value
				height.value = initialHeight.value
			} else {
				width.value = screenWidth
				height.value = initialHeight.value * (screenWidth / initialWidth.value)
				left.value = 0
			}
			isPinching.value = false
		}else{
			console.log(left.value)
			if(left.value<=0 && width.value<screenWidth){
				console.log('隐藏')
				isClose.value = false
			}
		}
	}
	const calculateDistance = (touch1, touch2) => {
		return Math.sqrt(
			Math.pow(touch2.clientX - touch1.clientX, 2) +
			Math.pow(touch2.clientY - touch1.clientY, 2)
		);
	};
</script>
<style lang="scss">
	.draw {
		position: fixed;
		top: 0;
		left: 0;
		
		
		transition: all ease .1s;
	}

	.webview {
		display: block;
		
		pointer-events: none;

	}
	.right{
		height: 100rpx;
		position: fixed;
		top: 50%;
		margin-top: -50rpx;
		left: 0;
		z-index: 999;
		border-radius: 0 30rpx 30rpx 0;
	}
</style>